Loading Marwan Elsayed
Skip to main content
Back to Work

ToolSwiftLanding pages

ToolSwift marketing site

A multi-page marketing website presenting ToolSwift features, pricing, help and articles.

Started
2025
Status
In progress
Role
Front-end developer
Area
Landing pages
Stack
Next.js, React, TypeScript, Tailwind CSS
What I implemented

Implemented the marketing front end, including product pages, article reading and the demo-request form.

Capture of the ToolSwift marketing site home page shown with sample data.
Real interface, sample data

Context / scope

Overview and scope

The public marketing site for ToolSwift, the SaaS CMS described in the CV.

The routes in the code are blogs, contact, customer portal, help center, pricing and about 16 feature pages.

Front-end developer. The CV lists integrated DTC e-commerce storefronts among the front ends built.

Results

  1. The CV records no result figures for this project, so none are stated.
  2. The captures show the product's own marketing content, which is not personal data.

Interface / screens

Walkthrough

Capture of the ToolSwift marketing site home page shown with sample data.
Home page. Real interface, sample data.
1 of 6
ToolSwift marketing site

Home page. Real interface, sample data.

1 of 6

Screen 1 of 6: Home page. Real interface, sample data.

Screen 1 of 6: Home page. Real interface, sample data.

Behaviour / flows

Features and flows

Demo requests

  • The form checks required fields and email format, and disables submission while a request is sending.
  • Success clears the form and shows a confirmation; a failed request shows an error toast.

Reading articles

  • Articles include section navigation and an image lightbox with zoom, pan and reset controls.

Engineering / decisions

Architecture and decisions

Next.js 15.1 with React and TypeScript, using Tailwind CSS 3 and MUI, with gsap and framer-motion for motion.

Forms are protected with reCAPTCHA.

Article metadata from content

The article route derives titles, descriptions and social metadata from fetched content, sets a canonical URL for the slug, and marks missing articles as no-index.

Lightbox outside the article layout

The image lightbox renders through a React portal into the document body. Opening it locks body scrolling; closing it restores the previous scroll setting and keyboard focus.

Stack / tools

Technologies

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • MUI
One product, several parts

Part of ToolSwift

ToolSwift is a headless commerce platform with a merchant admin interface and a B2B customer portal.

The admin handles catalogues, inventory, orders and quotes; the customer portal lets company buyers browse products, build carts and manage orders and payments.

I implemented the front ends, including a marketing site with product pages, articles and a demo-request form.

WhatsApp (opens in a new tab)