Nexus - Modern Minimal SaaS Landing Page

A clean, professional SaaS landing page built with Next.js 15, React 19, and Tailwind CSS. Features a modern blue and grey color scheme with minimal design and full HCD (Human-Centered Design) compliance.

✨ Features

🎨 Modern Design

• Clean Blue & Grey Palette - Professional, minimal aesthetic
• Accessibility First - WCAG 2.1 AA compliant
• Subtle Animations - Smooth, purposeful motion
• Responsive Design - Perfect on all devices
• Inter Font - Clean, modern typography
• Soft Shadows - Depth without distraction

⚡ Technical Stack

• Next.js 15.1.3 - Latest App Router
• React 19.0.0 - Newest React version
• TypeScript 5.7.2 - Full type safety
• Tailwind CSS 3.4.17 - Utility-first CSS
• Framer Motion 11.15.0 - Smooth animations
• Lucide Icons - Clean, consistent icons

📦 Complete Sections

1. ✅ Clean Navigation (sticky, responsive)
2. ✅ Hero Section (with dashboard preview)
3. ✅ Features Grid (6 features)
4. ✅ Pricing Table (3 tiers)
5. ✅ Stats & Testimonials
6. ✅ Call-to-Action
7. ✅ Comprehensive Footer

🚀 Quick Start

# 1. Navigate to project
cd modern-saas

# 2. Install dependencies
npm install

# 3. Run development server
npm run dev

Open http://localhost:3000

🎨 Color Palette

Primary Blue

• 50: #EFF6FF (lightest)
• 500: #3B82F6 (main)
• 600: #2563EB (hover)
• 900: #1E3A8A (darkest)

Neutral Grey

• 50: #FAFAFA (backgrounds)
• 200: #E5E5E5 (borders)
• 600: #525252 (body text)
• 900: #171717 (headings)

Accent

• Sky Blue: #0EA5E9
• Slate: #64748B
• Steel: #475569

📁 Project Structure

modern-saas/
├── app/
│   ├── globals.css       # Global styles
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/
│   ├── Navbar.tsx        # Navigation
│   ├── Hero.tsx          # Hero section
│   ├── Features.tsx      # Features grid
│   ├── Pricing.tsx       # Pricing table
│   ├── Testimonials.tsx  # Social proof
│   ├── CTA.tsx           # Call-to-action
│   └── Footer.tsx        # Footer
├── public/               # Static assets
├── tailwind.config.ts    # Tailwind config
└── tsconfig.json         # TypeScript config

🎯 Design Principles

1. Human-Centered Design (HCD)

• ✅ Clear visual hierarchy
• ✅ Sufficient color contrast (WCAG AA)
• ✅ Focus states for keyboard navigation
• ✅ Reduced motion support
• ✅ Semantic HTML
• ✅ Screen reader friendly

2. Minimal & Clean

• White space for breathing room
• Subtle gradients (no harsh transitions)
• Soft shadows (not heavy drop shadows)
• Simple border radius (8-12px)
• Limited color palette

3. Professional

• Corporate-appropriate colors
• Trustworthy design language
• Clear call-to-actions
• Professional typography
• Polished interactions

🎨 Customization

Change Brand Color

Edit tailwind.config.ts:

primary: {
  500: '#3B82F6',  // Change to your brand color
  600: '#2563EB',  // Darker shade
}

Update Content

• Company name: Search and replace "Nexus"
• Hero text: components/Hero.tsx
• Features: components/Features.tsx
• Pricing: components/Pricing.tsx

Change Font

The project uses Inter. To change:

1. Update Google Fonts import in app/globals.css
2. Update font-family in the body style

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

♿ Accessibility Features

• Semantic HTML5 elements
• ARIA labels where needed
• Keyboard navigation support
• Focus visible styles
• Reduced motion media query
• High contrast ratios (WCAG AA)
• Screen reader friendly

🚀 Deployment

Vercel (Recommended)

# Push to GitHub
git init
git add .
git commit -m "Initial commit"
git push

# Deploy on Vercel
# Import project and deploy

Other Platforms

• Netlify: Set build command to npm run build
• AWS Amplify: Follow Next.js deployment guide
• Self-hosted: npm run build && npm start

📊 Performance

• Static Generation: Pre-rendered at build time
• Image Optimization: Automatic with Next.js
• Font Optimization: Inter loaded via Google Fonts
• Code Splitting: Automatic per-route
• CSS Purging: Unused Tailwind classes removed

🎯 Design Tokens

Typography Scale

• Heading 1: 48-72px
• Heading 2: 36-60px
• Heading 3: 30-48px
• Body Large: 18-20px
• Body Normal: 16px

Spacing Scale

• Section: 64-96px
• Card: 24-32px
• Element: 12-24px

Shadow Scale

• Soft: Subtle elevation
• Medium: Card hover
• Strong: Modals, popovers

📝 Scripts

npm run dev      # Development server
npm run build    # Production build
npm start        # Production server
npm run lint     # Run ESLint

🌟 Key Features

Design

• ✅ Modern blue/grey color scheme
• ✅ Clean, minimal aesthetic
• ✅ Professional appearance
• ✅ Subtle, purposeful animations
• ✅ Soft shadows and borders

Accessibility

• ✅ WCAG 2.1 AA compliant
• ✅ Keyboard navigable
• ✅ Screen reader friendly
• ✅ High contrast text
• ✅ Focus indicators

Performance

• ✅ Static site generation
• ✅ Optimized images
• ✅ Minimal JavaScript
• ✅ Fast page loads
• ✅ SEO optimized

📄 License

MIT License - feel free to use for your projects!

🙏 Credits

• Framework: Next.js by Vercel
• Styling: Tailwind CSS
• Icons: Lucide React
• Font: Inter by Google Fonts
• Animations: Framer Motion