Process7

The Process7 component presents a responsive layout with two images, a title and caption, and dynamically rendered process steps in either a timeline or stepper format, depending on screen size.

All available props for the Process7 component are defined and handled within Component usage path file. This allows for easy modifications to the content of the Process section.

Component path: src/blocks/process/Process7.tsx

Component usage path: src/app/blocks/process/process7/page.tsx

Preview link: https://www.saasable.io/blocks/process/process7

Props Details

Prop	Type	Description	Displayed as
heading	string	The main title or heading displayed at the top of the section.	"Our Process"
caption	string	A short description or subtitle under the main heading that explains the content or process in more detail.	"A simple, step-by-step guide to how we work."
image1	ImageCommonProps	The first image to be displayed, usually as part of the process visualization. Pass image path or object with light and dark image path.	"path-to-image1.svg" or { light: 'path-to-image-light1.svg', dark: 'path-to-image1-dark.svg' }
image2	ImageCommonProps	The second image to be displayed, complementing the first in the layout. Pass image path or object with light and dark image path.	"path-to-image2.svg" or { light: 'path-to-image2-light.svg', dark: 'path-to-image2-dark.svg' }
cards	ProcessCardProps[]	An array of process cards containing individual steps, each with an icon, title, and description.	[{ title: 'Automated Scaling Process', description: 'Ensures optimal performance without manual intervention.', icon: 'tabler-artboard' }, ... ]