ProjectsFrontend & Landing Page
EZ Computer — High-Conversion Service Business Landing Page
A high-performance, modern landing page for an electronics repair service business built with Next.js 16, React 19, and TypeScript. Features multi-device responsiveness, Framer Motion animations, and direct WhatsApp CTA.
My Role
- 01Developed a modern component-driven landing page architecture utilizing Next.js App Router and TypeScript for maximum maintainability.
- 02Implemented high-fidelity responsive UI sections with Tailwind CSS v4 across various desktop, tablet, and mobile breakpoints.
- 03Crafted immersive user experiences and micro-interactions by deploying tailored physics-based animations using Framer Motion.
- 04Optimized Core Web Vitals and SEO performance through semantic HTML structure, Next.js Image caching, and clean metadata configuration.
- 05Engineered an interactive FAQ accordion and service workflow with an optimized WhatsApp CTA link generator for seamless customer acquisition.
Features
- 01Interactive Service Catalog: A cleanly organized grid layout displaying core electronic repair services with modern hover states and icon systems.
- 02Framer Motion Micro-Interactions: Smooth, scroll-triggered reveal animations that elevate engagement without compromising device performance.
- 03Seamless WhatsApp Conversion Loop: Direct integration allowing potential customers to instantly consult their hardware issues based on targeted pre-filled messages.
- 04Modular Dynamic Sections: Clean abstract separation of data layers (testimoni, faq, layanan) from the UI logic for easy content updates.
- 05Interactive FAQ Accordion: Collapsible question-and-answer section addressing customer concerns upfront.
Impact
- Enhanced Business Lead Generation: Streamlined the customer conversion journey by eliminating friction between browsing and contacting support.
- Perfect Performance Scores: Maintained high PageSpeed Insights scores by avoiding bulky design libraries and utilizing native React 19/Next.js optimizations.
- Zero-Bundle Bloat: Kept the application footprint lightweight by leveraging utility styling tools like clsx and tailwind-merge.
Stack
Next.jsTypeScriptTailwind CSSFramer Motion