Cipher Labs Platform

A modern, responsive website for Cipher Labs - a provider of full-service software solutions for small and medium-sized businesses.

🚀 Tech Stack

• Frontend: Angular 20 with TypeScript
• Styling: Tailwind CSS v4 + DaisyUI v5
• Backend: Firebase (Firestore, Authentication, Hosting)
• Design: Modern, responsive design inspired by contemporary software companies

🛠️ Features

• Responsive Design: Mobile-first approach with beautiful layouts on all devices
• Modern UI Components: Built with DaisyUI for consistent, accessible components
• Performance Optimized: Fast loading times with modern web optimization techniques
• SEO Ready: Proper meta tags, Open Graph, and Twitter Card support
• Firebase Integration: Ready for authentication, database, and hosting
• Professional Branding: Custom color scheme matching Cipher Labs brand

📁 Project Structure

src/
├── app/
│   ├── components/          # Reusable UI components
│   │   ├── header/         # Navigation header
│   │   ├── footer/         # Site footer
│   │   └── hero/           # Hero section
│   ├── pages/              # Page components
│   │   └── home/           # Homepage
│   ├── services/           # Angular services
│   ├── models/             # TypeScript interfaces
│   └── shared/             # Shared utilities
├── assets/                 # Static assets (images, icons)
└── environments/           # Environment configurations

🏃‍♂️ Getting Started

1. Install dependencies:

   npm install

2. Start development server:

   ng serve

   Navigate to http://localhost:4200/

3. Build for production:

   ng build

🎨 Design System

The website uses a custom design system built with:

• Primary Color: #3a0792 (Purple from Cipher Labs logo)
• Secondary Color: #333333 (Dark gray)
• Typography: Inter font family for modern, clean text
• Components: DaisyUI components with custom theming

🔥 Firebase Configuration

The project is configured for Firebase with:

• Authentication: Ready for user login/registration
• Firestore: Database for dynamic content
• Hosting: Deployment-ready configuration

To connect your Firebase project:

1. Update the configuration in src/environments/environment.ts
2. Replace the placeholder values with your Firebase project credentials

📱 Sections

• Hero Section: Compelling headline with call-to-action
• Services: Six key service offerings with icons
• About: Company values and differentiators
• Contact: Contact form and company information

🚀 Deployment

The project is ready for deployment to:

• Firebase Hosting: firebase deploy
• Netlify: Connect your GitHub repository
• Vercel: Import project from GitHub
• Traditional hosting: Build and upload dist/ folder

📈 Performance

• Initial bundle size: ~75KB (optimized)
• Lighthouse score ready for 90+ performance
• Modern CSS with efficient loading
• Optimized images and assets

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

---

Built with ❤️ by Cipher Labs