Full Name: Sarath S

Submission Date: January 2026,25

A modern, fully responsive marketing website built with Next.js 15 and Tailwind CSS v4. The project features a comprehensive homepage with multiple sections, a dynamic blog system with markdown rendering, contact forms, and smooth animations throughout.

• Next.js 16 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS v4 - Utility-first CSS framework
• React 19 - Latest React features

• react-markdown - Markdown rendering for blog posts
• lucide-react - Modern icon library
• PostCSS - CSS processing

• Turbopack - Next.js 16's ultra-fast bundler
• ESLint - Code linting
• npm - Package management

Total Time: ~8-10 hours

• Phase 1 - Setup & Foundation: 1 hour
• Phase 2 - Component Library: 2 hours
• Phase 3 - Homepage Sections: 3 hours
• Phase 4 - Blog System: 1.5 hours
• Phase 5 - Polish & Responsiveness: 1.5 hours
• Testing & Bug Fixes: 1 hour

Creating reusable, well-typed components was extremely satisfying. The Button, Card, and Accordion components are clean, flexible, and can be easily extended.

Adding smooth transitions and hover effects brought the website to life. The subtle micro-interactions make the user experience feel premium and polished.

Working with the latest version of Tailwind was fantastic. The new @layer directive system and improved CSS handling made styling much more intuitive.

Writing type-safe code with proper interfaces and types made the development process smoother and caught many potential bugs early.

Implementing SSG for the blog posts was rewarding. Seeing all pages pre-render at build time and achieve optimal performance was great.

The biggest challenge was dealing with CSS variable syntax in Tailwind v4. Initially used bg-[--variable] which doesn't work. Had to switch to standard Tailwind utilities like bg-blue-600.

Encountered issues with margin and padding not applying due to a CSS reset (* { margin: 0; padding: 0; }) overriding Tailwind utilities. Solved by restructuring CSS with @layer directives.

Had to ensure the PostCSS configuration was correct for Tailwind v4's new @tailwindcss/postcss plugin.

Testing across different screen sizes and ensuring grids collapse properly at each breakpoint required careful attention to detail.

Customizing the ReactMarkdown component styling to match the design system while maintaining readability took some iteration.

The reusable component library showcases my strengths:

1. Well-Structured Components

   • Clean separation of concerns
   • Proper prop typing with TypeScript
   • Flexible and extensible designs
   • Consistent naming conventions

2. Type Safety

   • Comprehensive TypeScript interfaces in types/index.ts
   • Proper typing for all component props
   • Type-safe data structures for blog posts, features, etc.

3. CSS Architecture

   • Organized styles with @layer directives
   • Custom animation system
   • Responsive design patterns
   • Accessible focus states

4. Code Quality

   • DRY (Don't Repeat Yourself) principles
   • Consistent coding style
   • Proper file organization
   • Clean, readable code

The Contact form component particularly demonstrates my ability to handle:

• Complex state management
• Form validation logic
• Error handling
• User feedback (loading states, success messages)
• Accessibility considerations

While familiar with Next.js, I had to learn:

• New metadata export patterns
• generateStaticParams() for dynamic routes
• Server Components vs Client Components distinction
• New notFound() error handling

Coming from v3, I learned:

• New @import "tailwindcss" syntax
• @theme directive for configuration
• Updated gradient syntax (bg-linear-to-br vs bg-gradient-to-br)
• New color opacity syntax

• Understanding the new async/await in Server Components
• Promise-based params in dynamic routes
• New hooks and patterns

• Setting up react-markdown with Next.js
• Custom component mapping for markdown elements
• Styling prose content while maintaining readability
• Code syntax highlighting considerations

• Creating performant CSS animations
• Using @layer for proper cascade
• Implementing prefers-reduced-motion for accessibility
• Balancing aesthetics with performance

• Node.js 18+ installed
• npm or yarn

# Install dependencies npm install # Run development server npm run dev # Build for production npm run build # Start production server npm start

Open http://localhost:3000 to view the application.

• 100% TypeScript - Fully type-safe codebase
• Zero Runtime Errors - Comprehensive error handling
• Static Site Generation - All blog posts pre-rendered
• Mobile-First Design - Optimized for all devices
• Accessibility - WCAG compliant with proper ARIA labels
• Performance - Optimized bundle size and load times

This assignment was an excellent opportunity to work with the latest web technologies and build a production-ready application. The structured approach with phases helped maintain focus and deliver a polished result.

The challenges encountered, particularly with Tailwind v4's new syntax, were valuable learning experiences that will benefit future projects. Overall, I'm proud of the clean, maintainable, and performant code delivered.

This project was created as part of a frontend development assignment.

Built with using Next.js and Tailwind CSS