💼 PurpleRain TechSafe – Careers Page

Modern, responsive careers website built with React, TypeScript, and Tailwind CSS

📋 Table of Contents

Overview
Features
Technology Stack
Getting Started
Development
Deployment
Form Handling
Project Structure
Contributing

🌟 Overview

PurpleRain TechSafe Careers Page is a modern, responsive website showcasing open positions and company culture. Built with React and TypeScript, it provides a seamless experience for potential candidates to learn about the company and apply for positions.

Live Site: https://purplerain-careers.netlify.app

✨ Features

Responsive Design: Mobile-first design that works on all devices
Modern UI: Built with Radix UI components and Tailwind CSS
Form Handling: Netlify Forms integration for resume submissions
Type-Safe: Full TypeScript coverage for reliability
Fast Performance: Vite for lightning-fast development and builds
Accessible: WCAG-compliant components from Radix UI
Dark Mode: Theme support with next-themes
Animations: Smooth transitions with tailwindcss-animate

🛠️ Technology Stack

Frontend

React 18.3 - UI library
TypeScript 5.5 - Type-safe JavaScript
Vite 5.4 - Build tool and dev server
Tailwind CSS 3.4 - Utility-first CSS framework
Radix UI - Accessible component primitives
Lucide React - Icon library
React Hook Form - Form management
Zod - Schema validation
React Router - Client-side routing

Dev Tools

ESLint - Code linting
PostCSS - CSS processing
Autoprefixer - CSS vendor prefixing

Deployment

Netlify - Hosting and form handling
Vercel - Alternative hosting option

🚀 Getting Started

Prerequisites

Node.js >= 18.0.0
npm >= 8.0.0 (or yarn/pnpm)

Installation

Clone the repository

git clone https://github.com/your-org/purplerain-careers.git
cd purplerain-careers

Install dependencies
```
npm install
```
Start development server
```
npm run dev
```
Open in browser Navigate to http://localhost:5173

💻 Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

Development Workflow

Create a feature branch
```
git checkout -b feature/my-feature
```
Make changes and test locally with npm run dev
Run linter to check code quality
```
npm run lint
```
Build to verify no build errors
```
npm run build
```

Commit and push

git add .
git commit -m "feat: add new feature"
git push origin feature/my-feature

📦 Deployment

Option 1: Netlify (Recommended)

Method A: Drag and Drop

Build your project
```
npm run build
```
Upload to Netlify
- Go to Netlify Drop
- Drag and drop the dist/ folder

Method B: Git Integration

Push to GitHub/GitLab
```
git push origin main
```
Connect to Netlify
- Go to Netlify Dashboard
- Click "Add new site" → "Import an existing project"
- Select your repository
- Configure build settings:
  - Build command: npm run build
  - Publish directory: dist
Deploy
- Netlify automatically deploys on push to main

Configure Custom Domain

Go to Site settings → Domain management
Add custom domain (e.g., careers.purplerain.tech)
Update DNS records as instructed

Option 2: Vercel

Install Vercel CLI
```
npm install -g vercel
```
Deploy
```
vercel
```
Follow prompts to configure project

📬 Form Handling

Netlify Forms Integration

The careers page uses Netlify Forms for resume submissions.

Setup

Add netlify attribute to form

<form name="apply-now" netlify>
  <!-- form fields -->
</form>

Netlify auto-detects the form on deployment
Configure email notifications
- Go to Site settings → Forms
- Click on your form (e.g., "Apply Now")
- Add email notification under Form notifications

Viewing Submissions

Netlify Dashboard: Site → Forms tab
Email: Configured notification email
Export: Download submissions as CSV

Form Fields

Name: Applicant's full name
Email: Contact email
Phone: Contact number (optional)
Position: Job position applying for
Resume: File upload (PDF, DOC, DOCX)
Cover Letter: Text area (optional)

📁 Project Structure

purplerain-careers/
├── public/                    # Static assets
│   ├── logo.png              # Company logo
│   ├── logo.avif             # Optimized logo
│   └── _redirects            # Netlify redirects
├── src/                       # Source code
│   ├── components/           # React components
│   │   ├── ui/              # Reusable UI components
│   │   ├── hero-section.tsx
│   │   ├── open-roles.tsx
│   │   ├── life-at-purplerain.tsx
│   │   ├── perks-benefits.tsx
│   │   ├── meet-team.tsx
│   │   ├── resume-submission.tsx
│   │   ├── site-navbar.tsx
│   │   └── footer.tsx
│   ├── data/                 # Static data
│   │   ├── jobs.ts          # Job listings
│   │   └── team.ts          # Team members
│   ├── lib/                  # Utilities
│   │   └── utils.ts         # Helper functions
│   ├── App.tsx              # Main app component
│   ├── App.css              # App styles
│   └── main.tsx             # Entry point
├── index.html                # HTML template
├── package.json              # Dependencies
├── tsconfig.json             # TypeScript config
├── vite.config.ts            # Vite configuration
├── tailwind.config.js        # Tailwind configuration
├── postcss.config.js         # PostCSS configuration
├── netlify.toml              # Netlify configuration
├── vercel.json               # Vercel configuration
└── README.md                 # This file

🎨 Customization

Adding New Job Listings

Edit src/data/jobs.ts:

export const jobs = [
  {
    id: 1,
    title: "Senior Security Engineer",
    department: "Engineering",
    location: "Remote",
    type: "Full-time",
    description: "Join our security team...",
    requirements: [
      "5+ years experience in cybersecurity",
      "Strong knowledge of network security",
      // ...
    ],
  },
  // Add more jobs...
];

Updating Team Members

Edit src/data/team.ts:

export const team = [
  {
    name: "John Doe",
    role: "CEO & Founder",
    image: "/team/john-doe.jpg",
    bio: "John has 15 years of experience...",
  },
  // Add more team members...
];

Styling

Colors: Edit tailwind.config.js to change theme colors
Fonts: Update index.html and tailwind.config.js
Components: Modify components in src/components/

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Code Style

Use TypeScript for all new code
Follow ESLint rules: npm run lint
Use Prettier for formatting
Write descriptive commit messages

Pull Request Process

Create a feature branch from main
Make your changes with clear commits
Run npm run lint and npm run build
Submit PR with description of changes

🔒 Security

Form Validation: Client-side validation with Zod
Spam Protection: Netlify's built-in spam filtering
File Upload: Restricted to PDF, DOC, DOCX formats
HTTPS: Enforced on all deployments

📄 License

🔗 Related Projects

PurpleRain Dashboard - Main application dashboard
PurpleRain Agent - Backend services and agents
PurpleRain Edge - Edge node configuration

📞 Support

For questions or issues:

Email: careers@purplerain.tech
Website: https://purplerain.tech
Dashboard: https://dash.purplerain.tech

Built with ❤️ by the PurpleRain Team

Name		Name	Last commit message	Last commit date
.idx		.idx
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.app.tsbuildinfo		tsconfig.app.tsbuildinfo
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.node.tsbuildinfo		tsconfig.node.tsbuildinfo
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Uh oh!

Latest commit

History

Folders and files

Repository files navigation