Cybersecurity SaaS Landing Page

A premium, futuristic cyberpunk-styled cybersecurity SaaS Nextjs landing page built with Next.js 16, React 19, and TailwindCSS. Features neon glow effects, glassmorphism design, and an enterprise-grade user experience inspired by industry leaders like CrowdStrike and Palo Alto.

🌟 Features

Design & Aesthetics

Neon Cyberpunk Theme: Deep navy background (#0a0015) with electric neon accents (cyan #00ffff, green #00ff99, magenta #ff00ff)
Glassmorphism Effects: Frosted glass cards with backdrop blur and semi-transparent overlays
Animated Glows: Dynamic neon glow shadows and hover effects throughout
Responsive Design: Fully mobile-optimized with fluid breakpoints (mobile, tablet, desktop)
Micro-interactions: Smooth transitions, hover states, and animated elements

Pages & Routes

Home (/) - Hero section with dashboard preview, problem/solution overview, features grid, testimonials, pricing, and FAQ
About Us (/about) - Company mission, statistics, and core values
Services (/services) - Six core security services with detailed descriptions
Contact (/contact) - Contact form with validation and business information
Join Now (/join) - Multi-step registration form with company and account setup

Components

Navbar - Fixed header with logo, navigation links, search bar, and CTA button
Footer - Comprehensive footer with links, social media, and company info
Hero Section - Eye-catching headline, dashboard preview, and call-to-action buttons
Features Grid - Showcase of six key capabilities
Use Cases - Industry-specific security solutions
Testimonials - Social proof with client quotes and metrics
Pricing - Three-tier pricing plans (Starter, Pro, Enterprise)
FAQ - Common questions with accordion-style answers
Forms - Contact form and multi-step registration with validation

🚀 Getting Started

Prerequisites

Node.js 18+ or higher
npm, yarn, pnpm, or bun

Installation

Clone the repository

git clone https://github.com/anitaparmar26/cybershield.git
cd cybershield

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

📁 Project Structure

project-root/
├── app/
│   ├── layout.tsx              # Root layout with fonts and metadata
│   ├── page.tsx                # Home page
│   ├── globals.css             # Global styles and design tokens
│   ├── about/
│   │   └── page.tsx            # About Us page
│   ├── services/
│   │   └── page.tsx            # Services page
│   ├── contact/
│   │   └── page.tsx            # Contact page
│   └── join/
│       └── page.tsx            # Join Now registration page
├── components/
│   ├── navbar.tsx              # Navigation bar component
│   ├── sections/
│   │   ├── hero.tsx            # Hero section
│   │   ├── problem.tsx         # Problem statement section
│   │   ├── solution.tsx        # Solution section
│   │   ├── features.tsx        # Features grid
│   │   ├── use-cases.tsx       # Use cases section
│   │   ├── testimonials.tsx    # Testimonials section
│   │   ├── pricing.tsx         # Pricing plans
│   │   ├── faq.tsx             # FAQ accordion
│   │   ├── final-cta.tsx       # Final call-to-action
│   │   └── footer.tsx          # Footer
│   ├── dashboard-preview.tsx   # Dashboard visualization component
│   └── ui/                     # shadcn/ui components
├── package.json                # Project dependencies and scripts
├── tsconfig.json               # TypeScript configuration
└── README.md                   # This file

🎨 Design System

Color Palette

Color	Hex	Usage
Primary	`#00ff99`	Main accent, buttons, glows
Accent	`#00ffff`	Secondary accent, borders
Secondary	`#ff00ff`	Highlights, decorative elements
Background	`#0a0015`	Main background
Card	`#1a0a2e`	Card backgrounds
Foreground	`#ffffff`	Text color
Muted	`#4a4a6a`	Secondary text
Destructive	`#ff1744`	Error states

Typography

Font Family: System fonts (Geist, Geist Mono)
Headings: Bold, uppercase, 2-4 sizes (text-2xl to text-5xl)
Body Text: Regular weight, leading-relaxed (1.4-1.6)
Font Weights: 400 (regular), 600 (semibold), 700 (bold)

Spacing Scale

Uses Tailwind's standard spacing scale (4px increments):

gap-4, gap-6, gap-8 for component spacing
p-4, p-6, px-8 for padding
mb-8, mt-12 for margin

🧩 Key Components

Navbar

Fixed navigation with:

Logo with shield icon
Desktop navigation links (HOME, ABOUT US, SERVICES, CONTACT)
Search input with neon border
"JOIN NOW" CTA button
Mobile hamburger menu

Hero Section

Large "CYBER SECURITY" headline with neon glow
Subheading and descriptive text
Dashboard preview image with glowing border
"JOIN US" and "LEARN MORE" buttons
Address/location info

Features Grid

Six feature cards showcasing:

Threat Detection & Prevention
Real-time Monitoring
Vulnerability Assessment
Incident Response
Security Analytics
Compliance Management

Forms

Contact Form: Email, phone, message validation
Registration Form: 3-step multi-step form with progress indicator
- Step 1: Company Information
- Step 2: Contact Details
- Step 3: Account Setup

⚙️ Technologies

Frontend

Next.js 16: React framework with App Router
React 19: UI library with latest hooks
TypeScript: Type-safe development
TailwindCSS 4: Utility-first CSS framework

UI Components

shadcn/ui: Accessible component library
Radix UI: Headless component primitives
Lucide React: Icon library (300+ icons)
Recharts: Data visualization

Forms & Validation

React Hook Form: Efficient form state management
Zod: TypeScript-first schema validation
@hookform/resolvers: Integration for form validation

Other

Sonner: Toast notifications
Next Themes: Dark mode support
Class Variance Authority: Component variant management
Tailwind Merge: Utility class management

🎯 Pages Overview

Home Page

The main landing page featuring:

Hero section with CTA
Problem/Solution narrative
Features highlight
Industry use cases
Social proof (testimonials)
Pricing comparison
FAQs
Final conversion CTA
Footer with navigation

About Us Page

Highlights the company with:

Mission statement
Key statistics (years, threats blocked, clients)
Core values (Security First, Customer Focused, Excellence, Innovation)
Team commitment messaging

Services Page

Details six security services:

Threat Detection - Real-time threat identification
Vulnerability Management - Continuous scanning and remediation
Incident Response - 24/7 incident handling
Security Analytics - Data-driven insights
Compliance Management - Regulatory compliance
Security Training - Employee education programs

Contact Page

Enables customer inquiries with:

Contact form with validation
Email, phone, address display
Business hours information
Social links

Join Now Page

Multi-step registration featuring:

Progress indicator
Company information collection
Contact details
Account setup
Benefits sidebar
Form validation and error handling

🎬 Getting Started with Development

Create New Pages

Create a new folder in /app (e.g., /app/new-page)
Add page.tsx with your content
Update navbar links to include the new page
Use existing components and styles for consistency

Create New Components

Create .tsx file in /components
Import shadcn/ui components as needed
Apply Tailwind classes following the design system
Use design tokens for colors (primary, accent, etc.)

Add Form Validation

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  // ... more fields
});

export default function MyForm() {
  const form = useForm({ resolver: zodResolver(schema) });
  // ...
}

🚢 Deployment

Deploy to Vercel (Recommended)

Push to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

Connect to Vercel
- Go to vercel.com
- Import your GitHub repository
- Vercel will auto-detect Next.js configuration
- Deploy with one click
Custom Domain
- In Vercel project settings, add your custom domain
- Update DNS records as instructed

Deploy Elsewhere

# Build for production
npm run build

# Start production server
npm start

📱 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Android)

🔧 Customization

Change Colors

Edit /app/globals.css color variables:

:root {
  --primary: #00ff99;  /* Change primary color */
  --accent: #00ffff;   /* Change accent color */
  /* ... other colors */
}

Add Company Logo

Place logo in /public/logo.png

Update navbar component:

<Image src="/logo.png" alt="Logo" width={40} height={40} />

Modify Pricing Plans

Edit /components/sections/pricing.tsx to update plan names, prices, and features.

Update Service Descriptions

Edit /app/services/page.tsx to add/remove services and update details.

📊 Performance

Optimized Images: Using Next.js Image component with lazy loading
Code Splitting: Automatic route-based splitting
CSS Purging: TailwindCSS removes unused styles
Fast Refresh: Instant feedback during development

🐛 Troubleshooting

Port Already in Use

# Change port
npm run dev -- -p 3001

Node Modules Issues

# Clear node modules
rm -rf node_modules package-lock.json
npm install

TypeScript Errors

# Rebuild TypeScript
npx tsc --noEmit

📝 License

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

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open a Pull Request

📞 Support

For support visit our Contact Page.

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
.github/workflows		.github/workflows
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Cybersecurity SaaS Landing Page

🌟 Features

Design & Aesthetics

Pages & Routes

Components

🚀 Getting Started

Prerequisites

Installation

Build for Production

📁 Project Structure

🎨 Design System

Color Palette

Typography

Spacing Scale

🧩 Key Components

Navbar

Hero Section

Features Grid

Forms

⚙️ Technologies

Frontend

UI Components

Forms & Validation

Other

🎯 Pages Overview

Home Page

About Us Page

Services Page

Contact Page

Join Now Page

🎬 Getting Started with Development

Create New Pages

Create New Components

Add Form Validation

🚢 Deployment

Deploy to Vercel (Recommended)

Deploy Elsewhere

📱 Browser Support

🔧 Customization

Change Colors

Add Company Logo

Modify Pricing Plans

Update Service Descriptions

📊 Performance

🐛 Troubleshooting

Port Already in Use

Node Modules Issues

TypeScript Errors

📝 License

🤝 Contributing

📞 Support

🎓 Learning Resources

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages