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

Clone the repository

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

Install dependencies
```
npm install
# or
yarn install
```

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

Run the development server
```
npm run dev
# or
yarn dev
```
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

Fork the repository
Create a feature branch
Make your changes
Run tests and linting
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:

Email: support@securiace.com
Phone: +1 (555) 123-4567
Live Chat: Available 24/7
Documentation: docs.securiace.com

🙏 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

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
.vscode		.vscode
public		public
scripts		scripts
src		src
.cursorrules		.cursorrules
.env.example		.env.example
.env.local		.env.local
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LOCAL-DEV-SUMMARY.md		LOCAL-DEV-SUMMARY.md
Makefile		Makefile
PROJECT_STATUS.md		PROJECT_STATUS.md
README-LOCAL-DEV.md		README-LOCAL-DEV.md
README.md		README.md
automation-workflows-enhanced.md		automation-workflows-enhanced.md
automation-workflows.md		automation-workflows.md
brand-guidelines.md		brand-guidelines.md
code-templates.md		code-templates.md
content-strategy.md		content-strategy.md
deployment-guide.md		deployment-guide.md
dev.config.js		dev.config.js
dev.db		dev.db
env.example		env.example
implementation-guides.md		implementation-guides.md
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
project-structure-enhanced.md		project-structure-enhanced.md
project-structure.md		project-structure.md
prompt.md		prompt.md
quality-assurance.md		quality-assurance.md
securiace.code-workspace		securiace.code-workspace
tailwind.config.js		tailwind.config.js
technical-specs.md		technical-specs.md
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo

securiace-dev/securiace.com_website

Folders and files

Latest commit

History

Repository files navigation