Data Sapience Lab Website

A modern, responsive website for Data Sapience Lab - a data science and AI consulting company. Built with React, TypeScript, Tailwind CSS, and Vite.

🚀 Features

• Modern Design: Clean, professional design based on Figma mockups
• Responsive Layout: Fully responsive across all device sizes
• Performance Optimized: Built with Vite for fast development and optimized builds
• TypeScript: Full TypeScript support for better development experience
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Component-Based: Modular React components for maintainability

🛠️ Tech Stack

• Frontend: React 18 + TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Development: Hot Module Replacement (HMR)
• Fonts: Geist (primary), Engagement (accent)

🏗️ Project Structure

src/
├── components/
│   ├── sections/
│   │   ├── Hero.tsx
│   │   └── About.tsx
│   └── ui/
│       ├── Button.tsx
│       ├── Navigation.tsx
│       └── Spark.tsx
├── App.tsx
├── main.tsx
└── index.css

🎨 Design System

• Primary Brand Color: #f2500d (Orange)
• Typography: Geist font family with custom sizes
• Spacing: Consistent spacing scale using Tailwind
• Components: Reusable UI components with TypeScript props

🚀 Getting Started

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:5173 in your browser

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📱 Sections

• Hero: Main landing section with video background and services overview
• About: Company introduction and team information
• Services: Detailed service offerings (planned)
• Projects: Portfolio showcase (planned)
• Pricing: Service pricing (planned)
• Contact: Contact form and information (planned)

🎯 Development Notes

• The project uses a component-based architecture
• All components are fully typed with TypeScript
• Tailwind CSS is configured with custom colors and fonts
• The design follows the Data Sapience Lab brand guidelines
• Placeholder content and images are used and should be replaced with actual content

📦 Build & Deployment

To build for production:

npm run build

The built files will be in the dist directory, ready for deployment to any static hosting service.

🤝 Contributing

1. Follow the existing code style and structure
2. Use TypeScript for all new components
3. Follow the established design system
4. Test thoroughly before submitting changes

📄 License

This project is proprietary software for Data Sapience Lab.