Troybel Landing Page

A high-performance, SEO-optimized, and pixel-perfect marketing website for CoorDeck, built from a Figma design. This project is engineered for exceptional speed, accessibility, and a flawless user experience across all devices.

Table of Contents

• Live Demo
• Key Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Available Scripts
• Deployment
• Performance Goals
• Contact

Demo

The production build of this project is deployed on Vercel:

➡️ Live Demo

✅ 12-15 Fully Responsive Pages: Pixel-perfect implementation for mobile, tablet, and desktop screens.

✅ High Performance: Optimized for speed with target Lighthouse scores of 90+.

✅ SEO-Optimized: Comprehensive SEO setup including metadata, structured data (JSON-LD), and a generated sitemap.

✅ Accessible: Built with accessibility in mind, adhering to WCAG 2.1 AA basics.

✅ Interactive Forms: Contact and newsletter forms with validation, spam protection, and API integration.

✅ Smooth Animations: Tasteful micro-interactions and page transitions powered by Framer Motion.

✅ Content-Ready: Easy to update content and images.

Tech Stack

• ✨ Framework - Next.js 14 (App Router)
• 🚀 Language - TypeScript
• 🎯 Styling - Tailwind CSS
• 💎 Animations - Framer Motion
• 🔧 Linting/Formatting - ESLint & Prettier
• 📱 Deployment - Vercel

Project Structure

/src
├── app/          # Next.js App Router for routing, pages, and layouts
├── assets/       # Static assets like images and icons
├── components/   # Shared and reusable React components (UI, layout, forms)
├── hooks/        # Custom React hooks for reusable logic
└── lib/          # Utility functions, API clients, and constants

Deployment

Follow these instructions to set up the project for local development.

Production Build

# Prerequisites
Node.js (v18.17 or later)
npm or pnpm

# Installation & Setup
Clone the repository: https://github.com/MTS-Services/alex_coordina.git

#Install dependencies:
npm install

#Run the development server:
npm run dev

The application should now be running at: http://localhost:3000

Deployment

1. This project is configured for seamless deployment on Vercel. To deploy:

2. Push your code to your Git repository (GitHub, GitLab, etc.).

3. Import the repository into your Vercel account.

4. Vercel will automatically detect the Next.js framework.

5. Add the required environment variables in the Vercel project settings.

6. Vercel will build and deploy the site. Subsequent pushes to the main branch will trigger automatic redeployments.

Performance Goals

• Performance: ≥ 90
• Accessibility: ≥ 95
• Best Practices: ≥ 95
• SEO: ≥ 95