Valom

Business Consultancy NextJS Template

DOCUMENTATION

  • Doc version: 1.0
  • Created: 10 March 2025
  • Last update: 10 March 2025

OVERVIEW

Introducing Valom – Business Consultancy NextJS Template, a template meticulously crafted for business consulting firms, professional agencies, strategists, and premium advisory services. Built on the robust NextJS 14 framework, Valom combines elegant design, exceptional performance, and full responsiveness, ensuring a stunning appearance across all devices and screen sizes. It’s the ideal solution to showcase your consulting expertise, services, and business solutions with professionalism and impact.

Valom is designed with optimized sections tailored to the needs of businesses in the consulting industry, from strategy to technology solutions. Leveraging the Bootstrap 5.x grid system and powered by React 18, this template offers flexible customization, enabling you to create a standout website that perfectly reflects your brand identity. Rigorously tested, Valom guarantees seamless compatibility and smooth performance across major browsers, including Chrome, Firefox, Safari, and Edge.

If you’re seeking a template to elevate your online presence, build client trust, and maximize user engagement, Valom - Business Consultancy NextJS Template is the perfect choice.

Main Features

  • React 18, NextJS 14, App Router for blazing-fast performance
  • 05 Creative Homepages designed for real estate (more to come!)
  • Multiple Header & Footer Styles
  • Modern, bold, and user-friendly design
  • Typescript (TSX) support for robust development
  • React Swiper Slider for stunning property showcases
  • GSAP Animations and AOS Animations for engaging transitions
  • 100% Fully Responsive and retina-ready across all devices
  • Built on Bootstrap 5 Framework for rapid development
  • SEO Optimized and W3C Validated Code
  • Cross-browser compatibility (including IE9+)
  • Pixel-perfect design with easily customizable colors and fonts
  • Clean, commented, and reusable code
  • Video Popup with React-modal-video
  • Detailed Documentation with setup guides
  • Lifetime Free Updates and dedicated support
  • And much more…

What do you get?

  • NextJS Template Source Code
  • Documentation

Note

- All images are used for preview purposes only and are not included in the final purchase files.
- This is not a WordPress theme; it is a NextJS-based template.

Change log

                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

  • /app
    • /about-us
    • /add-property
    • /blog
    • /...
  • /components
    • /elements
      • /AddClassBody.ts
      • /animateText.tsx
      • /BackToTop.tsx
      • /...
    • /layout
      • /footer
        • /Footer1.tsx
        • /Footer2.tsx
        • /Footer3.tsx
        • /Footer4.tsx
      • /header
        • /Header1.tsx
        • /Header2.tsx
        • /Header3.tsx
        • /Header4.tsx
      • /Layout.tsx
      • /Menu.tsx
      • /MobileMenu.tsx
      • /Search.tsx
      • /Sidebar.tsx
    • /sections
      • /About1.js
      • /About2.js
      • ...
  • /public
  • /utils
  • /.eslintrc.json
  • /.gitignore
  • /next-env.d.ts
  • /next.config.js
  • /package.json
  • /package-lock.json
  • /README.md

Structure

layout.tsx Structure

                                
                            

Dependencies

package.json

                                {
                                    "dependencies": {
                                      "aos": "^2.3.4",
                                      "bootstrap": "^5.3.3",
                                      "gsap": "^3.12.7",
                                      "next": "14.2.0",
                                      "react": "^18",
                                      "react-countup": "^6.5.3",
                                      "react-dom": "^18",
                                      "react-modal-video": "^2.0.2",
                                      "react-waypoint": "^10.3.0",
                                      "swiper": "^11.2.5",
                                      "wowjs": "^1.1.3"
                                    },
                                    "devDependencies": {
                                      "@types/aos": "^3.0.7",
                                      "@types/bootstrap": "^5.2.10",
                                      "@types/node": "^22",
                                      "@types/react": "^18",
                                      "@types/react-dom": "^18",
                                      "@types/react-modal-video": "^1.2.3",
                                      "eslint": "^9",
                                      "eslint-config-next": "15.0.3",
                                      "typescript": "^5"
                                    }
                                  }
                            

Routing

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application

A React component called Link is provided to do this client-side route transition.

                                
                            

In the example above we have multiple links, each one maps a path (href) to a known page:

  • / → pages/index.js
  • /page-about → pages/page-about.js

Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.

Deployment

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

  • Sign up to Vercel (no credit card is required).
  • After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
  • Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
  • After importing, it’ll deploy your Next.js app and provide you with a deployment URL
  • To get more help on the deployment checkout

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

  1. Download the latest version of the template to your device.
  2. Connect to your hosting via FTP software
  3. Upload the template folder you unzipped to your site folder
  4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -