The context
A simple landing page to keep practicing. I used clsx and tailwind-merge to learn how to organize Tailwind classes when things get messy, and I aimed for reusable React components with props so copy and styles can change easily.
It works well as a frontend starter to extend later into a full-stack app with Next.js as a headless frontend. I also thought through the server vs client component split to maximize Next.js server-side rendering (SSR).
For now it’s a one-page demo only—the links are placeholders and exist for appearance.
What I learn :
- Stack and structure:
- Next.js 16 (App Router), React 19, and TypeScript
- Tailwind CSS v4 with design tokens and @theme in globals.css
- clsx and tailwind-merge to compose and dedupe class names
- Reusable components: text and styles driven by props
- Layout, performance, and accessibility:
- next/image with priority and sizes on the hero for LCP
- Flexbox and grid; min-w-0 on 50/50 text/image columns to prevent overflow
- Semantic heading outline (single h1, h2 per block, h3 for testimonial names)
- Highlighter-style “Learn more” links using color-mix tied to the style guide
- Product and integration:
- Metadata and favicons following Next.js file conventions
- Server-first UI; minimal "use client" boundaries
- Deliberate Server vs Client boundaries: keep interactivity only where needed so more of the page is rendered on the server and less JS ships to the browser
- One-page demo: nav links are decorative placeholders for now