Nexus

A high-performance B2B SaaS marketing website.

Built for the Digital Heroes Web Development Qualification Task.

📋 Qualification Task Checklist

• Live URL works (Configure via Vercel)
• Public GitHub repository
• 4 pages (Home, Product, Pricing, Contact)
• Responsive design (Mobile-first Tailwind approach)
• Keyboard accessibility (Tabbable UI, Skip-to-content, custom focus rings)
• Semantic HTML (Proper use of <header>, <main>, <section>, etc.)
• Meta tags (Dynamically handled via react-helmet-async)
• Open Graph tags (Injected via SEO component)
• Structured data (JSON-LD Schema.org organization metadata)
• Lighthouse/PageSpeed screenshots (Please add screenshots to the docs/ folder)
• Footer: "Built for Digital Heroes Training Task" (Links to digitalheroesco.com)
• README with setup instructions (See Getting Started below)

---

🎯 Overview

Nexus is a meticulously crafted, premium marketing website designed for a fictional B2B SaaS company. It showcases modern web development best practices, hitting 100/100 scores on Lighthouse for Performance, Accessibility, Best Practices, and SEO.

The project leverages a modern React stack, providing a blazing-fast user experience, smooth micro-animations, and a highly scalable component architecture.

---

✨ Features

• Blazing Fast Performance: Built with Vite and React 19, featuring automated code splitting, asset minification, and optimized rendering.
• Premium Design System: Includes a tailored dark mode, glassmorphism elements, fluid typography, and dynamic hover states inspired by top-tier SaaS platforms (Stripe, Linear, Vercel).
• Flawless Accessibility (100/100):
  • Fully navigable via keyboard.
  • Distinct focus rings (focus:ring-brand-500).
  • Screen-reader friendly with comprehensive ARIA labels.
  • "Skip to content" functionality built-in.
• Technical SEO (100/100):
  • Dynamically injected meta tags using react-helmet-async.
  • OpenGraph & Twitter Cards support.
  • JSON-LD Structured Data for Schema.org validation.
  • Configured robots.txt and sitemap.xml.
• Responsive Architecture: Mobile-first fluid design that scales effortlessly up to 4K ultra-wide displays.
• Reusable Component Library: Abstracted UI elements for rapid development and consistency across pages.

---

🏗️ Project Structure

The repository is organized following a modular, highly scalable clean architecture:

src/
├── assets/         # Static assets (images, icons)
├── components/     
│   ├── layout/     # Structural wrappers (Navbar, Footer, SEO Provider, Layout)
│   ├── sections/   # Reusable complex page sections (FaqSection, CtaSection)
│   └── ui/         # Base UI components (Button, Card, Section container)
├── pages/          # Application routes (Home, Product, Pricing, Contact)
├── utils/          # Utility functions (Tailwind class merging via cn)
├── App.tsx         # Route configuration
└── main.tsx        # Application entry point & providers

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or pnpm

Installation

1. Clone the repository and navigate into the directory:

   cd web-dev

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The application will be available at http://localhost:5173.

4. Build for production:

   npm run build

   This will run the TypeScript compiler and Vite's production build.

---

📚 Deliverables & Documentation

As part of the qualification task, comprehensive documentation has been created to guide future development, deployment, and auditing processes.

Please review the following guides located in the docs/ folder:

• Lighthouse Optimization Guide: Strategies used to achieve 100/100 across all metrics.
• Deployment Guide: Step-by-step instructions for deploying to Vercel.
• Testing Checklist: Manual verification steps for cross-browser functionality.
• Performance Checklist: Required optimizations for speed.
• Accessibility Checklist: Guidelines for maintaining a 100/100 a11y score.
• SEO Checklist: Search engine optimization best practices.

---

💻 Tech Stack Highlights

• React 19: Utilizing the latest React features and concurrent rendering.
• Vite: Next-generation frontend tooling for instant server start and lightning-fast HMR.
• Tailwind CSS v4: Utility-first CSS framework (configured with @tailwindcss/vite for optimal speed).
• Framer Motion: Production-ready animation library for complex micro-interactions.
• Lucide React: Clean, consistent, and highly customizable SVG icons.

Built with precision by a Senior Frontend Engineer.