Smooth ERPLanding pages
Smooth ERP landing pages
The Smooth ERP marketing site in Arabic and English: pages for each business field and a sign-up where a company picks its modules and gets its own workspace.
Context / scope
Overview and scope
Smooth ERP is sold to companies by subscription, and each company gets its own workspace on a subdomain. This site is where a company finds the product and signs up.
Pages: home, one page per field (point of sale, construction, factories), sign-up, sign-in, profile and careers.
Front-end developer and the main contributor: 121 of the repository's 134 commits, September to December 2024. The CV records designing and implementing a landing page with a subscription system.
Results
- The CV states that the landing page uses Next.js server rendering to improve SEO and performance. It records no figures, so none are stated.
- Phone numbers, emails and the office address in the captures are replaced with sample values, and client logos are not shown.
Interface / screens
Walkthrough
Screen 1 of 9: Arabic home page, right to left. Real interface, sample data.
Responsive and states
Screen 1 of 1: Arabic sign-up on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
A marketing site in two languages
- The home page walks through the product: what it is, why it, eight areas it manages, the fields it serves, the mobile and desktop apps, and a price request form.
- Arabic is the default and reads right to left; English reads left to right, and the language switch keeps the visitor on the same page.
- Point of sale, construction and factories each have their own page with the advantages for that field.
Sign-up that creates a workspace
- Visitors choose the modules they need (projects, stores, accounts, point of sale) as toggles, and a summary lists the choice with a way to remove each one.
- The organization name becomes the workspace address, so it is shown live as name.smootherp.com and checked: lowercase letters, numbers and hyphens.
- Choosing point of sale asks how many sales points will use the system.
- After sign-up a panel shows the workspace address and counts down before opening it, with a button to open it straight away.
From a field page to sign-up
- The point of sale and construction pages end with a button that opens sign-up with that module already chosen, next to the price request.
Accounts and contact
- Sign-in, and a profile page where a customer edits their details.
- The price request form is validated on the server and confirms or reports the error in place.
Engineering / decisions
Architecture and decisions
Next.js 14 (App Router) with TypeScript and Tailwind CSS, in Arabic and English through next-intl, with the language in the address.
Forms use React Hook Form and server actions; motion uses Framer Motion and a typed headline uses react-typed; sections below the first screen load through dynamic imports.
Direction comes from the language
The page direction is set from the locale and the components use start and end instead of left and right, so one layout serves Arabic right to left and English left to right without a switch per language.
Check the name before it becomes an address
The organization name is lowercased and checked against the rules for a subdomain before it is sent, because it becomes the workspace address. Modules are sent in the form the API expects, built fresh on every attempt.
Forms through server actions
Sign-up, sign-in, the profile and the price request go through Next.js server actions. The session is kept in a cookie that middleware reads to guard the profile, sign-in and sign-up routes.
Search details per page and language
Each page sets its own title, description and sharing tags in both languages, field pages add schema.org structured data, and the sitemap and robots file are generated at build time.
Limits / notes
Known limitations
- The careers page and its application form are left out: job listings depend on an API request that was never finished.
- The captures run the real app against a local stand-in for the API, so sign-up shows its result without creating a workspace.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- next-intl
- React Hook Form
- Framer Motion
- next-sitemap
Part of Smooth ERP
Smooth ERP brings point of sale, inventory and accounting into an organisation-based ERP interface.
Its marketing pages introduce the system and let visitors choose modules for subscription registration. I led the ERP front-end development and implemented the marketing front ends.