GlamSync
Pre-launch SaaS landing page — editorial design, interactive UI, and performance-focused frontend
CLIENT: GLAMSYNC · 2026
Pre-Launch
Product
Next.js
Framework
React + Tailwind
UI
TypeScript
Language
App Router
Architecture
Custom
Cursor
Native APIs
Animations
Custom
Carousel
App Router Metadata
SEO
Overview
GlamSync is an upcoming SaaS product for the salon and spa industry, and this project focused specifically on building its pre-launch landing page frontend. The underlying GlamSync SaaS application is being developed separately; my responsibility was to translate the intended product direction into a polished, responsive, and maintainable public-facing experience. The landing page uses a modern Next.js App Router architecture with React, TypeScript, and Tailwind CSS, organized around reusable page sections and shared components. Rather than following a conventional SaaS template aesthetic, the visual direction uses an editorial-style approach with large display typography, structured layouts, interactive elements, and motion-based transitions. The frontend includes responsive layouts across desktop, laptop, tablet, and mobile, along with a custom dual-cursor interaction system implemented without a dedicated cursor library. The cursor uses requestAnimationFrame for smooth trailing movement and hover-state interactions. Scroll-based section reveals are implemented using the browser's native IntersectionObserver API and reusable CSS transitions, avoiding unnecessary animation dependencies. The Features section includes a custom-built image and content carousel, while the pricing section provides interactive billing-period switching, plan comparison states, responsive layouts, and reusable plan data structures. Interactive FAQ functionality is also included. SEO was incorporated into the architecture through the Next.js App Router Metadata API, OpenGraph and Twitter/X metadata, dynamic sitemap generation, robots.ts, manifest.ts, semantic HTML, and structured heading hierarchy. The implementation deliberately avoids unnecessary third-party dependencies where native browser capabilities are sufficient, keeping the frontend maintainable and lightweight. The completed landing page establishes the pre-launch digital presence for GlamSync while keeping the unreleased SaaS application's backend, internal APIs, authentication, database, and production business logic outside the scope of this project.
Engineering Challenges
Translating an editorial-style visual direction into a maintainable React and Next.js implementation without relying on a pre-built landing-page template
Designing responsive layouts that preserve the intended visual hierarchy across desktop, laptop, tablet, and mobile screen sizes
Building a custom dual-cursor interaction system with smooth trailing movement using requestAnimationFrame instead of a dedicated animation library
Implementing scroll-reveal behavior using the native IntersectionObserver API while keeping the animation system reusable and lightweight
Building a custom feature/image carousel without introducing a third-party carousel dependency
Creating an interactive pricing interface with billing-period switching, plan comparison states, and reusable plan data
Implementing responsive and reusable FAQ interactions within the overall landing-page component architecture
Structuring the application around reusable React components while maintaining a clear Next.js App Router architecture
Implementing SEO and social-sharing foundations through the Next.js Metadata API, sitemap, robots, manifest, semantic HTML, and structured headings
Avoiding unnecessary third-party dependencies where native browser capabilities could provide the required interaction behavior
Maintaining a clear project boundary between the landing page frontend and the separate GlamSync SaaS application being developed by other developers
Outcomes
Delivered the complete pre-launch landing page frontend for GlamSync
Established a polished public-facing digital presence for the upcoming SaaS product
Implemented a responsive experience across desktop, laptop, tablet, and mobile devices
Created a reusable React component architecture for the landing page
Delivered custom cursor interactions and lightweight scroll-based animation systems
Built interactive pricing, FAQ, and feature carousel experiences without relying on unnecessary third-party UI libraries
Implemented SEO and social-sharing foundations directly through the Next.js App Router
Added dynamic sitemap, robots, and web manifest configuration
Maintained a TypeScript-based frontend architecture designed for future maintainability
Kept the implementation scope clearly focused on the landing page frontend while the underlying GlamSync SaaS platform remains a separate development effort
Media Gallery
No screenshots or demo videos added yet