Skip to content

README.md

Latest commit

 

History

History
415 lines (307 loc) · 9.92 KB

README.md

File metadata and controls

415 lines (307 loc) · 9.92 KB

Securiace Technologies - Enterprise Website

A modern, enterprise-grade website built with Next.js 14, featuring comprehensive hosting and cybersecurity solutions. This project showcases professional web development practices, SEO optimization, and conversion-focused design.

🚀 Features

Core Functionality

  • Modern Tech Stack: Next.js 14 with App Router, TypeScript, TailwindCSS
  • Responsive Design: Mobile-first approach with perfect responsiveness
  • Dark/Light Mode: System preference detection with manual toggle
  • SEO Optimized: Comprehensive meta tags, structured data, and performance optimization
  • Analytics Ready: Plausible Analytics and Google Analytics 4 integration
  • Accessibility: WCAG 2.1 AA compliant with proper ARIA labels

Business Features

  • Service Showcase: Comprehensive hosting and cybersecurity service pages
  • Pricing Plans: Transparent pricing with psychological anchoring
  • Contact Forms: Multi-step forms with validation and analytics tracking
  • Blog System: Content management with categories and search
  • Support Center: Knowledge base and multiple support channels
  • Trust Signals: Certifications, testimonials, and security badges

Technical Features

  • Performance: 100% Lighthouse scores target
  • Security: Security headers, input validation, and XSS protection
  • Caching: Intelligent caching strategies for optimal performance
  • Error Handling: Comprehensive error boundaries and fallbacks
  • Type Safety: Full TypeScript coverage with strict mode
  • Testing: Unit, integration, and E2E testing setup

🏗️ Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── about/             # About page
│   ├── blog/              # Blog listing and posts
│   ├── contact/           # Contact page
│   ├── pricing/           # Pricing plans
│   ├── services/          # Services overview
│   ├── support/           # Support center
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # Reusable components
│   ├── ui/               # ShadCN UI components
│   ├── layout/           # Layout components (header, footer)
│   ├── sections/         # Page sections
│   ├── forms/            # Form components
│   ├── animations/       # Animation components
│   └── providers/        # Context providers
├── lib/                  # Utility functions
│   ├── utils.ts         # General utilities
│   ├── constants.ts     # App constants
│   ├── seo.ts          # SEO utilities
│   ├── analytics.ts    # Analytics tracking
│   ├── validations.ts  # Form validation schemas
│   ├── api.ts          # API client
│   └── cache.ts        # Caching utilities
├── hooks/               # Custom React hooks
├── types/               # TypeScript type definitions
└── content/             # Static content and data
    ├── blog/           # Blog posts
    └── data/           # Static data files

🛠️ Tech Stack

Frontend

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: TailwindCSS + ShadCN UI
  • Icons: Lucide React
  • Animations: Framer Motion
  • Forms: React Hook Form + Zod

Backend & Services

  • Analytics: Plausible Analytics, Google Analytics 4
  • CRM: Twenty CRM integration
  • Email: Listmonk integration
  • Billing: WHMCS integration
  • Support: Chatwoot integration
  • Calendar: Cal.com integration

Development Tools

  • Linting: ESLint + Prettier
  • Testing: Jest + Testing Library
  • Type Checking: TypeScript strict mode
  • Git Hooks: Husky + lint-staged

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Git

Installation

  1. Clone the repository

    git clone https://github.com/securiace/securiace-website.git
cd securiace-website

  2. Install dependencies

    npm install
# or
yarn install

  3. Set up environment variables

    cp .env.example .env.local

    Fill in the required environment variables:

    NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=your_ga_id
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=your_domain
# Add other required variables

  4. Run the development server

    npm run dev
# or
yarn dev

  5. Open your browser Navigate to http://localhost:3000

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run type-check   # Run TypeScript type checking

# Testing
npm run test         # Run unit tests
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Run tests with coverage
npm run test:e2e     # Run E2E tests

# Deployment
npm run deploy       # Deploy to production
npm run preview      # Preview production build

📱 Pages Overview

Homepage (/)

  • Hero section with domain search
  • Services overview
  • Pricing highlights
  • Testimonials
  • Trust signals
  • Call-to-action sections

About (/about)

  • Company story and mission
  • Team members
  • Values and certifications
  • Statistics and achievements

Services (/services)

  • Comprehensive service listings
  • Detailed service descriptions
  • Features and benefits
  • Pricing information
  • Contact options

Pricing (/pricing)

  • Transparent pricing plans
  • Feature comparisons
  • Add-on services
  • FAQ section
  • Contact sales

Contact (/contact)

  • Multiple contact methods
  • Contact form with validation
  • Support hours
  • Office information
  • FAQ section

Blog (/blog)

  • Article listings
  • Category filtering
  • Search functionality
  • Popular articles
  • Newsletter signup

Support (/support)

  • Support methods
  • Knowledge base
  • Popular articles
  • FAQ section
  • Live chat integration

🎨 Design System

Colors

  • Primary: Cyber blue (#0ea5e9)
  • Secondary: Security green (#10b981)
  • Accent: Trust purple (#8b5cf6)
  • Neutral: Gray scale for text and backgrounds

Typography

  • Primary Font: Inter (Google Fonts)
  • Code Font: Fira Code (Google Fonts)
  • Font Sizes: Responsive scale from 12px to 72px

Components

  • Buttons: Multiple variants with hover states
  • Cards: Consistent spacing and shadows
  • Forms: Accessible inputs with validation
  • Navigation: Responsive with mobile menu
  • Modals: Accessible overlays and dialogs

🔧 Configuration

TailwindCSS

The project uses TailwindCSS with custom configuration:

  • Custom color palette
  • Extended spacing scale
  • Custom animations
  • Dark mode support

Next.js

  • App Router configuration
  • Image optimization
  • Font optimization
  • Metadata generation
  • Security headers

TypeScript

  • Strict mode enabled
  • Path aliases configured
  • Comprehensive type definitions
  • ESLint integration

📊 Performance

Core Web Vitals Targets

  • LCP: < 1.5s
  • CLS: < 0.1
  • FID: < 100ms
  • INP: < 200ms

Optimization Strategies

  • Image optimization with Next.js Image
  • Code splitting and lazy loading
  • CDN integration
  • Caching strategies
  • Bundle analysis

🔒 Security

Security Headers

  • Content Security Policy (CSP)
  • HTTP Strict Transport Security (HSTS)
  • X-Frame-Options
  • X-Content-Type-Options
  • X-XSS-Protection

Input Validation

  • Zod schemas for all forms
  • XSS protection
  • CSRF protection
  • Rate limiting

🧪 Testing

Test Structure

src/__tests__/
├── components/     # Component tests
├── pages/         # Page tests
├── utils/         # Utility tests
├── e2e/          # End-to-end tests
└── __mocks__/    # Mock files

Testing Tools

  • Jest: Test runner
  • Testing Library: Component testing
  • Playwright: E2E testing
  • MSW: API mocking

📈 Analytics

Tracking Events

  • Page views
  • Form submissions
  • CTA clicks
  • Service interactions
  • Pricing plan views
  • Contact method usage

Analytics Providers

  • Plausible: Privacy-focused analytics
  • Google Analytics 4: Enhanced ecommerce tracking
  • Custom Events: Business-specific tracking

🚀 Deployment

Production Build

npm run build
npm run start

Environment Variables

Ensure all required environment variables are set:

  • NEXT_PUBLIC_APP_URL
  • NEXT_PUBLIC_GOOGLE_ANALYTICS_ID
  • NEXT_PUBLIC_PLAUSIBLE_DOMAIN
  • Database connection strings
  • API keys for integrations

Deployment Platforms

  • Vercel: Recommended for Next.js
  • Netlify: Alternative platform
  • Docker: Containerized deployment
  • Self-hosted: Custom server setup

🤝 Contributing

Development Workflow

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests and linting
  5. Submit a pull request

Code Standards

  • Follow TypeScript best practices
  • Use Prettier for code formatting
  • Write comprehensive tests
  • Document new features
  • Follow accessibility guidelines

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

🙏 Acknowledgments

  • Next.js Team: For the amazing framework
  • TailwindCSS Team: For the utility-first CSS framework
  • ShadCN UI: For the beautiful component library
  • Vercel: For the deployment platform
  • Open Source Community: For the amazing tools and libraries

Built with ❤️ by the Securiace Technologies team