DIS-30-Landing-Page-Process-Flow

[huiii421]

desktop

mobile:

keypoints:

• Defines a Step type and an array of four step objects (id, title, description, imageUrl).
• Uses useState to track activeStep, and useRef plus offset calculations to center the active card in its scroll container.
• Handles click events on step cards via handleStepChange, with smooth horizontal scrolling.
• Implements touch support (handleTouchStart, handleTouchMove, handleTouchEnd) to detect left/right swipes and change steps.
• Adds an auto‑play useEffect timer that advances to the next step every 5 seconds (loops back to the first).
• Leverages Material UI’s , , and for responsive design, grid layout, and active/inactive styling.
• Integrates Next.js’s for performant image rendering inside the step viewport.

[Copilot]

Pull Request Overview

This PR implements the landing page process flow by adding a new ProcessFlow component with swipe and auto‑play functionalities, as well as introducing supporting UI elements and theme adjustments.

• Adds a responsive ProcessFlow component with smooth scrolling and touch support
• Introduces a new CTAButton component and updates the theme and layout for improved UI consistency
• Integrates the ProcessFlow component into the HeroSection and updates the app layout

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/theme/index.ts	Sets up custom theming with spacing, typography, breakpoints, etc.
src/components/ui/CTAButton.tsx	Implements a variant-based CTA button using Material UI styles.
src/components/features/landing/ProcessFlow.tsx	Implements step-based process flow with smooth scrolling and swipes.
src/components/features/landing/HeroSection.tsx	Integrates the ProcessFlow component into the hero section.
src/app/layout.tsx	Modifies the layout with hydration suppression and updated styling.

[Qiming-Liu]

Change the file structure

[huiii421]

Change the file structure

Modification about the file structure completed