Thank you for Purchasing



Luxiren - React JS Landing Page and Portfolio Collection

Version 3.4.0


  • Created : 19 Nov 2019
  • Latest Update : 26 Feb 2024

What is Luxiren?


banner

Luxiren Is a powerful, beautiful and pixel-perfect landing page and portfolio collection. Built with React, Next Js, Material UI, and Sketch files included. It's suitable for Corporate, Startup, Saas company, Agencies, Cloud business, Architect company, Freelancers, Personal portfolios, eCommerce shop, and any type of business to introduce and promote their profile, products, or services.

Luxiren provides you clean modern design along with dark mode to make it easy on your eyes. Beside that multi color scheme is the one of the best feature, so you will easly to adjust the theme with your brand identity. Not stop until that, this template also has RTL support and translation ready with 6 languages.

What's Inside?
This template contain 14 templates + starter-project. Designed for multipurpose industries including Agency, Architect, Cryptocurrency, Fashion, Hosting, Mobile, 4 Portfolio and Saas. Those extraordinary things is supported by more than 100 components based on material-ui designs. That all for you to boost your web app development process. Luxiren is the template you will love to work on.

Template Feature


React + Next JS version

  • 14 landing page templates. Built with one of most popular javascript library React.JS, Material UI and Next.JS with SSR
  • Various modern design Agency, Architect, Cryptocurrency, Fashion, Hosting, Mobile, Portfolio and Saas
  • Premium designs. Simple and elegant multi color scheme
  • Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
  • RTL Support.Auto RTL adjustment styling with jss-rtl
  • Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
  • 100+ section components and UI modules which reusable and easy to modify.
  • Interactive and Attractive show. Stunning animation, parallax, scrolling effects, until video background will make your site wilder
  • Next Generation JavaScript written in ES6
  • Responsive design Based on standard 12 Grid System
  • Starter Project. Build app from scratch without without being distracted from innate feature.
  • Support mono repo, . Modern architecture to managing modules in multiple project.
  • High Performance. Styling with JSS (CSS in JS) and Async Code Splitting.
  • Clean code maintained by eslint.
  • Fully vector icons and font icons.
  • And many more...

Sketch Version

  • 14 elaborate high quality designs
  • Including Dark and Light version
  • Based on standard 12 Grid System
  • Fully Vector Icons
  • Easy to edit and well organized layers, and goups.

Files and Folder Structure


└── packages
    ├── agency-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── architect-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── crypto-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── fashion-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── femine-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── hosting-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── maskulino-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── mobile-apps-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── profile-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── saas-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── unisex-theme
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    ├── showcase
    │   ├── components
    │   ├── pages
    │   ├── static
    │   ├── theme
    │   └── vendors
    └── starter-project
        ├── components
        ├── pages
        ├── static
        ├── theme
        └── vendors                                                                  
                        

Installation and Running App


Luxiren is built on top of Material UI
  • Connect to the internet
  • Install NodeJs from NodeJs Official Page
  • Unzip the Luxiren file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you've unzipped the product)
  • Go to packages and choose a template. Example packages/agency/
  • Install Modules
    Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, and just wait until finish.
    process
  • For installation by use lerna, please check this link Installation using lerna
  • Run App
    After build installation complete, then run the app.
    npm run dev
    The process might take a moment.
    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • For agency template please navigate to http://localhost:3001
  • Here's the port list for each template
    Template Port Landing Page URL
    Starter Project 3000 http://localhost:3000
    Agency Theme 3001 http://localhost:3001
    Architect Theme 3002 http://localhost:3002
    Cryptocurrency Theme 3003 http://localhost:3003
    Fashion Theme 3004 http://localhost:3004
    Hosting Theme 3005 http://localhost:3005
    Mobile Apps Theme 3006 http://localhost:3006
    Portfolio Theme 3007 http://localhost:3007
    Saas Theme 3008 http://localhost:3008
    Medical Theme 3009 http://localhost:3009
    Movie Theme 3010 http://localhost:3010
    Education Theme 3011 http://localhost:3011
    Femine Theme 3012 http://localhost:3012
    Maskulino Theme 3013 http://localhost:3013
    Unisex Theme 3014 http://localhost:3014
    Showcase 3015 http://localhost:3015

Installation With Lerna

Lerna is A tool for managing JavaScript projects with multiple packages. This template has 10 packages(projects) inside packages/ folder. So to install them at once you can use lerna. See full docs of lerna here https://github.com/lerna/lerna. Here's the installation guide:

  • Let's start by installing Lerna globally with npm:
    npm install --global lerna
  • Go to your root project (where you've unzipped the product)
  • Then install all packages
    lerna bootstrap
    Note: This process will take some minutes, because there's lot of modules to be installed. If got stuck for this step. Please install the packages(projects) one by one by use npm install instead.

Build App


Build project

  • Here'a bellow an example for agency-theme. You can use the same steps to other packages(projects)
  • First you need to build the production assets first
    npm run build
    It usually take longer time than development to generate and compress production code. The generated files will be placed in out/ process
  • Now you can see the exported HTML content on a directory called out/ inside your project. That's a fully functioning static web app. You can deploy it to any static hosting service, and it will work fine. But before we do that, we need to test it out locally. In order to test the app, install the following serve NPM module globally:

          cd out
                                  
          npm install -g serve
                                  

    After you've installed serve, run following commands from /out directory

          serve -p 1234
                                  

    Now you can access your static app in http://localhost:1234




Deployment


Deploy to server

  • Option 1: Deploy as Static HTML
    • Run npm run build
    • Then you can see the exported HTML content on a directory called out/ inside your project.
    • That's a fully functioning static web app. You can deploy/copy it to your hosting service and access it from your domain or IP
  • Option 2: Use Node.js Server
    • First you have to clone/copy the project in your hosting/cloud server.
    • If you haven't install the dependencies before, please run npm install
    • Open next.config.js And Please disable/comment output: 'export'
    • Run npm run build
    • Run app in background process

      To run it in background you may try PM2 pm2.keymetrics.io and https://www.npmjs.com/package/pm2. PM2 is a daemon process manager that will help you manage and keep your application online 24/7

      • Install the pm2 globally
        npm install pm2@latest -g
      • Go to project folder i.e packages/agency
      • Create ecosystem file
        pm2 ecosystem
        It will generate ecosystem.config.js in your root project
      • Open ecosystem.config.js. Then Change the script target to ./index.js like this:
                                              
            module.exports = {
              apps : [{
                name      : 'luxi-react', // Your project name
                exec_mode: 'cluster',
                instances: 'max', // Or a number of instances
                script    : './node_modules/next/dist/bin/next',
                args: 'start',
                env: {
                  NODE_ENV: 'development'
                },
                env_production : {
                  NODE_ENV: 'production'
                }
              }],
        
              deploy : {
                production : {
                  user : 'node',
                  host : '212.83.163.1',
                  ref  : 'origin/master',
                  repo : 'git@github.com:repo.git',
                  path : '/var/www/production',
                  'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
                }
              }
            };
                                              
                                            
      • Run the project
        pm2 start ecosystem.config.js --env production
      • Please setup the proxy like nginx, apache, etc if necessary, then navigate to yourdomain.com



Deploy to Vercel

Deploy your website quickly, without having to manually configure DNS, SSL, CDN or hosting. Integrate with your favorite tools, and bring your entire team of developers and designers closer together.

  • Go to your projects, then npm run build. The static HTML will be generated in out/ folder
  • Next in console go to out/ folder with cd out command
  • Then just run vercel to delploy.
  • Choose some vercel optional config, like scope, project name, etc. Or you can just hit enter and enter for just default option.
  • Wait until process finish. Once finish you will get live url yo access it.

Troublehooting


Here's most common error problem when installation and first setup project

  • When installation and you got error like this :
    
    Could not resolve dependency:
    peer example-peer-package@"^3.2.0" from example-package@3.0.0
    example-package@3.0.0 from the root project
            
  • Try to remove the error package (i.e example-package@3.0.0) from package.json Then install again.
    npm install
    After installation done, try to install the problematic package manually with --legacy-peer-deps options.
    npm install example-package@3.0.0 --legacy-peer-deps
    Example for multiple package
    npm install example-package@3.0.0 other-package@1.0.0 --legacy-peer-deps
  • When you run npm run dev, build, etc, then you got error like this :br />
    
    Error: error:0308010C:digital envelope routines::unsupported
        at new Hash (node:internal/crypto/hash:67:19)
        at Object.createHash (node:crypto:130:10)
            
  • Open terminal and paste these as described:
    1. Linux and macOS (Windows Git Bash)
      export NODE_OPTIONS=--openssl-legacy-provider
    2. Windows command prompt
      set NODE_OPTIONS=--openssl-legacy-provider
    3. Windows PowerShell
      $env:NODE_OPTIONS = "--openssl-legacy-provider"
  • Then try npm run dev or npm run build again
  • if got warning like this :
    
    npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
            
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • If you get error messages when start project npm start like this
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
            
  • It mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
  • Please install node-sass manually by npm install node-sass --save
  • Build dll libraries npm run build:dll
  • Try to start project again npm start
  • Once build finish you may get warning getInitialProps.
    Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
    Read more: https://err.sh/next.js/opt-out-automatic-prerendering
            
  • It because this template use next.js eith custom _app. So just ignore this, that's Next.js telling you that all your pages will have SSR.
  • You will get this warning message if not use HTTPS
    A cookie associated with a resource at http://doubleclick.net/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
            
    Here's the guide to setup HTTPS with NextJS:
  • Development: Every changes the code will show warning messages.
    
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
            
    It because window scrolling function with HMR. This message will show in development only, you can ignore it by reload the browser.


Basic Code Structure


Folder structure

project-theme                                                                            
│   ├───components                                                                          
│   ├───pages                                                                               
│   ├───static                                                                              
│   │   ├───favicons                                                                        
│   │   ├───images                                                                          
│   │   ├───locales                                                                       
│   │   └───text                                                                            
│   ├───theme                                                                               
│   └───vendors                                                                             
                        

Code preview



Landing Page

Landing page structure /pages/index.js

code

Header

You can put google analytics, font icon, embeded fonts, etc here. /components/header.js

code2

Document body

/pages/_document.js

code2


Directory Alias

This template use babel-plugin-root-import. So you can call any components or images from root project easly.

Name Alias Directory Sample Use
UI Components ~/components /components import Header from '~/components/Header';
Images ~/public/images public/images import imgAPI from '~/public/images/imgAPI';
Dummy text and link ~/public/text public/text import brand from '~/public/text/brand';
Component Style Overider ~/vendors /vendors import '~/vendors/slick/slick-theme.css';
And any your files ~/yourfolder /yourfolder import '~/yourfolder/file';



Template Architecture

This is template architecture in diagram visuailzation. Click diagram or full screen button full screen to show in new tab with full screen

Starter Project


This source code made for you who want build app from scratch without without being distracted from innate feature. In other word it's an initial(empty) project with built in configuration setup.

  • You can go through to /packages/starter-project/ folder
  • Connect to the internet
  • Open Terminal
  • The next installation process are same like was described above. Installation Step
  • Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, it could take some minutes, just wait until finish.
  • Run App
    npm run dev

    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • Navigate to http://localhost:3000
  • After this you can can start develop your app with this initial project. And will bo more suitable when use other ready-template as a reference

UI and Languages


Follow this guide bellow to modify user interface, branding identity and default language.

Create New Page


A. Page with SSG(Static Site Generation) support

  • This template support translation with Static Site Generation (SSG). If you want to make a page with translation support, please follow this pattern.

    About more about static site translation check out this blog post and this example project.
  • For example we want to create an "About" page, you need to create to 2 files pages/about.js and pages/[locale]/about.js.
  • // pages/about.js
    // Use for redirection by following language param [locale]. It will redirect to pages/[locale]/about.js
    
    import { Redirect } from '../lib/redirect';
    export default Redirect;
                                  
                                                                
    // pages/[locale]/about.js
    // It's a real page containing translations or components with translations
    
    import React from 'react';
    import { useTranslation } from 'next-i18next';
    import { getStaticPaths, makeStaticProps } from '../../lib/getStatic';                                
    
    export default function About() {
      const { t } = useTranslation('common');
      return (
        <div>
          <p>This is the about page</p>
          <p>{t('title')}</p>
        </div>
      );
    }
    
    const getStaticProps = makeStaticProps(['common']);
    export { getStaticPaths, getStaticProps };
                                  
  • Then we can access that page with http://localhost:3000/about or http://localhost:3000/en/about


B. Page with Server Side Translation

  • You can use simple translation method in folder luxiren-simple-routing/. So you can skip this section
  • By default this template uses SSG method for translation, but it can be used as Server Side Rendering. Please follow this guide to convert as a Server Side Translation Page.
  • Setup the configuration
    1. In /next-i18next.config.js set ssg: false
    2. In next.config.js uncomment const { i18n } = require('./next-i18next.config') and i18n, It will look like this:
      // /next-i18next.config.js
      
      const { i18n } = require('./next-i18next.config')
      //... rest import
      
      module.exports = withImages({
        i18n,
        //... rest code
      });
                                    
    3. In pages/_app.js in useEffect() add/uncomment this code
      // /pages/_app.js
      useEffect(() => {
        const { pathname, asPath, query } = router;
        router.push({ pathname, query }, asPath, { locale: curLang });
        // ...rest code
      }, []);
                                    
  • Change the all pages file in /pages
    1. Move and replace all files inside pages/[locale]/ to it's parent pages/, Then delete the empty[locale] folder.
    2. Open a page file, example index.js in pages/ folder.
    3. Remove the import of static lib and import serverSideTranslations
      // pages/about.js
      // (-) Remove or disable
      import { getStaticPaths, makeStaticProps } from '~/lib/getStatic';
      
      // (+) Add or enable                              
      import { serverSideTranslations } from 'next-i18next/serverSideTranslations';                             
                                    
    4. Remove the export { getStaticPaths, getStaticProps } and use serverSideTranslations
      // pages/about.js
      // (-) Remove or disable
      const getStaticProps = makeStaticProps(['common']);
      export { getStaticPaths, getStaticProps };
      
      // (+) Add or enable                              
      export const getStaticProps = async ({ locale }) => ({ props: { ...await serverSideTranslations(locale, ['common']) } });
                                    
    5. Here's the complete code
      // pages/about.js
      import React from 'react';
      import { useTranslation } from 'next-i18next';
      // import { getStaticPaths, makeStaticProps } from '~/lib/getStatic';
      import { serverSideTranslations } from 'next-i18next/serverSideTranslations';                             
      
      export default function Home() {
        const { t } = useTranslation('common');
        return (
          <div>
            <p>This is the about page</p>
            <p>{t('title')}</p>
          </div>
        );
      }
      
      // const getStaticProps = makeStaticProps(['common']);
      // export { getStaticPaths, getStaticProps };
      export const getStaticProps = async ({ locale }) => ({ props: { ...await serverSideTranslations(locale, ['common']) } });
                                    
    6. Do this method for all pages. For the faster way, you can use find and replace inside pages/ with code-editor
    7. Remove .next/ folder in root project. This folder might hidden by your OS, so please show it!
    8. Then start the project npm run dev or build npm run build it to see the result. Please note this method not support for npm run export


Create New Component


  • Go to /components/
  • Create new folder ex: MyComponent. The name must in capitalize
  • Create new js file inside that folder MyComponent, ex SampleComponent.js. The name must in capitalize
  • Inside the file create a simple ES6 Class ex:
    // file: /components/MyComponent/SampleComponent.js
    
    import React from 'react';
    
    function SampleComponent(){
        return (
          <H1>Hello World</H1>
        );
      }
    }
    
    export default SampleComponent;
    
    
  • Open a target page where you want use it. Ex: Open /pages/[locale]/about.js. (Example page that we've made in previous section)
  • Import component form component library
    import SampleComponent from '~/components/MyComponent/SampleComponent.js'
  • Then use it inside render function
    return (
      <SampleComponent />
    );
                                
  • Here's complete code
    // file: /pages/[locale]/about.js
    import React from 'react';
    import Head from 'next/head';
    import { useTranslation } from 'next-i18next';
    import { getStaticPaths, makeStaticProps } from '../../lib/getStatic'; 
    import SampleComponent from '~/components/MyComponent/SampleComponent.js'
    
    export default function About() {
      const { t } = useTranslation('common');
      return (
        <div>
          <Head>
            <title>
              { brand.crypto.name }
              &nbsp; - Blank page
            </title>
          </Head>
          <p>This is the about page</p>
          <p>{t('title')}</p>
          <SampleComponent />
        </div>
      );
    }
    
    const getStaticProps = makeStaticProps(['common']);
    export { getStaticPaths, getStaticProps };
    
    
  • Then you can check the result at http://localhost:3000/about or http://localhost:3000/en/about

Clean Code with Eslint


Eslint is disabled by default. You can enable it to keep your code consistent and avoiding bug.
NOTE: By enable eslint the running app process at beginning will slower.

Just follow this step to enable eslint
  • Go to /next.config.js
  • Just uncomment this code bellow
    const withCSS = require('@zeit/next-css')
    const withImages = require('next-images');
    
    module.exports = withImages(
      withCSS({
        publicRuntimeConfig: {
          localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
            ? process.env.LOCALE_SUBPATHS
            : 'none',
        },
        webpack: (config, options) => {
          cssModules: true,
          config.plugins.push(
          //      new ESLintPlugin({
          //        exclude: ['node_modules']
          //      })
          );
          config.node = {}
          return config;
        },
      })
    );
  • Then should become like this
    const withCSS = require('@zeit/next-css')
    const withImages = require('next-images');
    
    module.exports = withImages(
      withCSS({
        publicRuntimeConfig: {
          localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
            ? process.env.LOCALE_SUBPATHS
            : 'none',
        },
        webpack: (config, options) => {
          cssModules: true,
          config.plugins.push(
            new ESLintPlugin({
              exclude: ['node_modules']
            })
          );
          config.node = {}
          return config;
        },
      })
    );
    
  • Run the project npm run dev.
    You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
    More about elint https://eslint.org/docs/user-guide/getting-started

External Reference

Here's some external reference of library that we used


Fonts Used




roboto font

Icons Used


To use icon, it has two method

Material Font Icons

  • Please make sure Google Material Icons already embeded in components/head.js.
    If not just embed this inside head tag
    <head>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    </head>
  • Connect to internet
  • Import Material UI Icon to your component
    import Icon from '@material-ui/core/Icon';
  • Then add it inside render method. Example for use access_time icon
    <Icon>access_time<Icon />



Material SVG Icons

It's interesting to have the building blocks needed to implement custom icons. This template use NPM package, @material-ui/icons, that includes the 900+ official Material icons converted to SvgIcon components.

  • Import all necessary icons form Material UI Icons library
    import AccessTime from '@material-ui/icons/AccessTime';
    import Adjust from '@material-ui/icons/Adjust';
    import BatteryStd from '@material-ui/icons/BatteryStd';
                                
  • Use them as component in render method
     render() {
      return (
        <div>
          <AccessTime />
          <Adjust />
          <BatteryStd />
        <div />
      );
    }
                                

Or from original source Google Material Icons




IonIcons Font

  • Please make sure IonIcons already embeded in components/head.js.
    If not just embed this inside head tag
    <head>
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    </head>
  • Connect to internet
  • The sample usage
    
    <span className="ion-ios-world-outline" />  
                              
  • Here's the ionicons cheatsheet https://ionicons.com/v2/cheatsheet.html


  • Sources and Credit


    Fonts :
    Roboto, Robot Condensed, Lato, Open Sans, Montserrat

    Preview Images Used
    Unsplash
    Pixabay
    randomuser.me

    Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


    Credits
    Name Repository License
    @babel.js https://github.com/babel/babel MIT
    @material-ui https://github.com/mui-org/material-ui MIT
    clsx https://www.npmjs.com/package/clsx MIT
    express https://github.com/expressjs/express MIT
    jss-rtl https://github.com/alitaheri/jss-rtl MIT
    material-ui-pickers https://github.com/dmtrKovalenko/material-ui-pickers MIT
    next.js https://nextjs.org/ MIT
    next-i18next https://www.npmjs.com/package/next-i18next MIT
    react https://github.com/facebook/react MIT
    react-countup https://github.com/glennreyes/react-countup MIT
    react-google-maps https://github.com/tomchentw/react-google-maps MIT
    react-loading-bar https://github.com/mironov/react-redux-loading-bar MIT
    react-material-ui-form-validator https://www.npmjs.com/package/react-material-ui-form-validator MIT
    react-slick https://github.com/akiran/react-slick MIT
    react-youtube https://www.npmjs.com/package/react-youtube MIT
    redux-form https://github.com/erikras/redux-form-material-ui MIT
    webpack https://github.com/webpack/webpack MIT

    Online Suport


    If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

    A product by Ilham Meidi Brata



    Enjoy and don’t forget to rate my template.

    Thank you very much!

    Change Log


    Version 3.4.0 – 26 Feb, 2023
    Feature: Use next-link for all link navigation
    Files changes:
    - packages/[theme-name]/components/
    Chore: Add MainContainer component for main wrapper
    Files added:
    - packages/[theme-name]/components/MainContainer
    Chore: Upgrade to Next 14
    Files added:
    - packages/[theme-name]/package.json
    - packages/[theme-name]/next.config.js
    Version 3.3.4 – 25 Sept, 2023
    Fixed: Slick Carousel for RTL Layout
    Files changes:
    - packages/architect-theme/components/Project/Project.js
    - packages/education-theme/components/PopularCourse/PopularCourse.js
    - packages/fashion-theme/components/Blog/blog-style.js
    - packages/fashion-theme/components/Promotions/promotion-style.js
    - packages/fashion-theme/components/Testimonials/testi-style.js
    - packages/portfolio-theme/components/Blog/Blog.js
    - packages/portfolio-theme/components/Services/Services.js
    - packages/portfolio2-femine-theme/components/Blog/Blog.js
    - packages/portfolio2-femine-theme/components/Services/Services.js
    Chore: Uses vanta npm for animation banner
    Files changes:
    - packages/hosting-theme/pages/_document.js
    - packages/hosting-theme/components/head.js
    - packages/hosting-theme/components/Banner/Banner.js
    - packages/portfolio2-femine-theme/components/BannerNav/Hero/Animation.js
    - packages/portfolio2-femine-theme/components/head.js
    - packages/portfolio2-femine-theme/pages/_document.js
    - packages/portfolio3-unisex-theme/components/BannerNav/Hero/Animation.js
    - packages/portfolio3-unisex-theme/components/Blog/Blog.js
    - packages/portfolio3-unisex-theme/components/Services/Services.js
    - packages/portfolio3-unisex-theme/components/head.js
    - packages/portfolio3-unisex-theme/pages/_document.js
    - packages/portfolio4-maskulino-theme/components/BannerNav/Hero/Animation.js
    - packages/portfolio4-maskulino-theme/components/Blog/Blog.js
    - packages/portfolio4-maskulino-theme/components/Services/Services.js
    - packages/portfolio4-maskulino-theme/components/head.js
    - packages/portfolio4-maskulino-theme/pages/_document.js
    Version 3.3.3 – 11 Jun, 2023
    Fixed: Image Loader
    Files changes:
    - packages/[all-themes]/package.json
    Version 3.3.2 – 13 Feb, 2023
    Fixed: Page Navigation
    Files changes:
    - packages/[all-themes]/components/PageNav
    Fixed: Starter Project Parallax
    Files changes:
    - packages/starter-project/components/Feature/Parallax.js
    - packages/starter-project/components/Feature/feature-style.js
    Version 3.3 – 18 Jan, 2023
    Upgrade to MUI 5, Next 13 and React 18
    Files changes:
    - packages/[all-themes]
    Version 3.2 – 12 Nov, 2022
    Add simple translation codes
    Files added/changes
    - packages/[theme-name]/next-i18next.config.js
    - packages/[theme-name]/pages/
    - packages/[theme-name]/pages/_app.js
    Add vercel config file
    Files added/changes
    - packages/[theme-name]/vercel.json
    Docs: Update troubleshooting cases
    Version 3.1 – 8 Sept, 2022
    Upgrade translation with SSG support
    Files added/changes
    - packages/[theme-name]/i18n.js
    - packages/[theme-name]/index.js
    - packages/[theme-name]/lib/
    - packages/[theme-name]/next-i18next.config.js
    - packages/[theme-name]/next.config.js
    - packages/[theme-name]/public/locales/
    - packages/[theme-name]/pages/_app.js
    - packages/[theme-name]/pages/_document.js
    - packages/[theme-name]/pages/*.js
    - packages/[theme-name]/pages/[locale]/
    - packages/[theme-name]/components/
    Fixed detail movie icon in Movie Theme
    Files added/changes
    - packages/movie-theme/pages/movie-detail.js
    Update dependencie google maps
    Files added/changes
    - packages/agency/package.json
    - packages/architect/package.json
    - packages/medical/package.json
    Update documentation
    Version 3.0 – 12 May, 2022
    Add new theme for portfolio
    File added
    - /packages/femine-theme
    - /packages/maskulino-theme
    - /packages/unisex-theme
    Version 2.3 – 24 May, 2021
    Fixed: Default language issue
    File changes
    - /packages/[theme-name]/components/Footer/Footer.js
    - /packages/[theme-name]/components/Header/header-style.js
    - /packages/[theme-name]/i18n.js
    - /packages/[theme-name]/pages/_app.js
    - /packages/[theme-name]/public/locales/
    Chore: Update NextJS to v10
    File changes
    - /packages/[theme-name]/package.json
    - /packages/[theme-name]/next.config.js
    - /packages/[theme-name]/components/head.js
    Version 2.2.2 – 21 Mar, 2021
    Fixed: Translation initial text for static site mode.
    File changes
    - /packages/[theme-name]/pages/_app.js
    Version 2.2.1 – 27 Dec, 2020
    Fixed: Warning local language for static HTML mode
    File changes
    - /packages/[theme-name]/i18n.js
    Feature: Add required checkbox component
    File changes
    - packages/[theme-name*]/components/Forms/Checkbox.js
    - packages/[theme-name*]/components/Forms/Contact.js
    - packages/[theme-name*]/components/Forms/Register.js
    * exlcuding Profile and Fashion theme
    Version 2.2 – 1 Nov, 2020
    Sketch: Optimize resolution width
    File changes
    - sketch-files/*.sketch
    Fixed: Warning namespace withI18nextTranslation when application started
    File changes
    - packages/[theme-name]/pages/_app.js
    Feature: Add translation for notification
    File changes
    - packages/[theme-name]/public/locales/[lang]/common.json
    - packages/[theme-name]/components/Notification/Notification.js
    Chore: Update Error page to hooks lifecycle
    File changes
    - packages/[theme-name]/pages/_error.js
    Version 2.1 – 22 Jul, 2020
    Change font family
    - Medical: Lato
    - Movie: Open Sans
    - Education: Roboto
    Update Core Dependencies
    - Material UI v4.11.0
    - Next.js v9.4.4
    - next-i18next v4.5.0
    - React v16.13.1
    - JSS v10.3.0
    Version 2.0 – 18 Jul, 2020
    Added 3 new themes: Medical, Movie, and Education
    Fixed: Agency carousel RTL issues
    File changes:
    - packages/agency-theme/components/Services/Services.js
    - packages/agency-theme/components/Services/services-style.js
    - packages/agency-theme/components/Testimonials/testi-style.js
    Version 1.1.2 – 8 Jun, 2020
    Docs: Updated build app instruction
    Fixed: Setting popover and page scrolling issue in all browser for Windows Changes: [all-theme]/components/Header/Settings.js
    Fixed: Architect Theme hover style for social media icon background color Changes: architect-theme/components/Footer/footer-style.js
    Version 1.1.1 – 7 Apr, 2020
    Fixed: Error url loader in slick-theme.css Changes: [all-theme]/vendors/slick/slick-theme.css
    Fixed: Language box footer border Changes: mobile-app-theme/components/Footer/footer-style.js
    hosting-theme/components/Footer/footer-style.js
    architect-theme/components/Footer/footer-style.js
    starter-project/components/Footer/footer-style.js
    Version 1.1 – 3 Feb, 2020
    Feature: Added script and configuration for deployment to NOW Changes: [all-theme]/package.json
    [all-theme]/now.json
    Feature: Added script to generate static HTML Changes: [all-theme]/package.json
    Feature: Agency theme added popup image preview for case study Changes: agency-theme/components/CaseStudies/CaseStudies.js
    Fixed: missing theme palette Changes: [all-theme]/theme/palette.js
    Fixed: Mobile Theme Showcase Carousel Changes: mobile-apps-theme/components/Showchase/Showcase.js
    mobile-apps-theme/components/Showchase/showcase-style.js
    Fixed: Crypto Theme footer background Changes: crypto-theme/components/Footer/footer-style.js
    Fixed: Saas Theme wrong navigation link Changes: saas-theme/components/Header/Header.js
    Fixed: Hosting Theme domain selection no working Changes: hosting-theme/components/Banner/Banner.js
    Fixed: Hosting Theme domain selection no working Changes: hosting-theme/components/Banner/Banner.js
    Fixed: Architect Theme cannot click button read more for project card Changes: architect-theme/components/Project/Project.js
    Fixed: Architect Theme cannot click button read more for project card Changes: architect-theme/components/Project/Project.js
    Fixed: Agency Theme services carousel cannot go to previous Changes: agency-theme/components/Services/Services.js
    Fixed: Responsive Error Page Changes: [all-theme]/components/Error/Error.js
    [all-theme]/components/Error/error-style.js
    Version 1.0 – 19 Nov, 2019
    Luxiren released